<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>排版 &middot; Bootstrap</title>
<!-- Bootstrap 核心CSS -->
<link href="../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../assets/css/docsearch.min.css" rel="stylesheet">
<link href="../assets/css/docs.min.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link rel="apple-touch-icon" href="../assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="../assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="../assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
  
<link rel="mask-icon" href="../assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="../favicon.ico">
<meta name="msapplication-config" content="../assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

<!-- Twitter -->
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Introduction">
<meta name="twitter:description" content="排版 Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta name="twitter:image" content="../assets/brand/bootstrap-social.png">

<!-- Facebook -->
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
<meta property="og:title" content="Introduction">
<meta property="og:description" content="排版 Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
<meta property="og:type" content="website">
<meta property="og:image" content="../assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="../assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../index.html" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../index.html">首页</a></li>
      <li class="nav-item"><a class="nav-link active" href="../docs/index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link " href="../examples/index.html">实例</a></li>
      
      
      
      
    </ul>
  </div>
  
   </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      


<nav class="collapse bd-links" id="bd-docs-nav">
  <div class="bd-toc-item"> <a class="bd-toc-link" href="../docs/index.html"> 快速入门 </a>
    <ul class="nav bd-sidenav">
    <li><a href="../docs/index.html">关于</a></li>
    <li><a href="../docs/download.html">下载</a></li>
    <li><a href="../docs/contents.html">目录结构</a></li>
    <li><a href="../docs/browsers-devices.html">浏览器与设备调优</a></li>
    <li><a href="../docs/javascript.html">JavaScript脚本</a></li>
    <li><a href="../docs/theming.html">主题化</a></li>
    <li><a href="../docs/build-tools.html">编译工具</a></li>
    <li><a href="../docs/webpack.html"> Webpack模块化</a></li>
    <li><a href="../docs/accessibility.html">无障碍浏览</a></li>
    </ul>
  </div>
  <div class="bd-toc-item"> <a class="bd-toc-link" href="../layout/overview.html"> 布局 </a>
    <ul class="nav bd-sidenav">
    <li><a href="../layout/overview.html">概述</a></li>
    <li><a href="../layout/grid.html">栅格</a></li>
    <li><a href="../layout/utilities-for-layout.html"> 布局实施建议 </a> </li>
    </ul>
  </div>
<div class="bd-toc-item active"> <a class="bd-toc-link" href="reboot.html">内容 </a>
  <ul class="nav bd-sidenav">
    <li><a href="reboot.html"> 初始化与CSS重置 </a> </li>
    <li class="active bd-sidenav-active"><a href="typography.html"> 排版 </a> </li>
    <li><a href="code.html"> 代码 </a> </li>
    <li><a href="images.html"> 图片 </a> </li>
    <li><a href="tables.html"> 表格 </a> </li>
    <li><a href="figures.html"> 图文框 </a> </li>
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../components/alerts.html"> 组件 </a>
  <ul class="nav bd-sidenav">
    <li><a href="../components/alerts.html"> 警告提示框(Alerts) </a> </li>
    <li><a href="../components/badge.html"> 徽章(Badge) </a> </li>
    <li><a href="../components/breadcrumb.html"> 面包屑导航(Breadcrumb) </a> </li>
    <li><a href="../components/buttons.html"> 按钮(Button) </a> </li>
    <li><a href="../components/button-group.html"> 按钮组(Button-group) </a> </li>
    <li><a href="../components/card.html"> 卡片(Card) </a> </li>
    <li><a href="../components/carousel.html">  轮播效果(Carousell) </a> </li>
    <li><a href="../components/collapse.html"> 折叠面板(Collapse) </a> </li>
    <li><a href="../components/dropdowns.html"> 下拉菜单(Dropdown) </a> </li>
    <li><a href="../components/forms.html"> 表单(Form) </a> </li>
    <li><a href="../components/input-group.html"> 输入框(Input-group) </a> </li>
    <li><a href="../components/jumbotron.html"> Hero大块屏(Jumbotron) </a> </li>
    <li><a href="../components/list-group.html"> 列表组(List-group) </a> </li>
    <li><a href="../components/media-object.html"> 媒体对象/图文混排(Media-object) </a> </li>
    <li><a href="../components/modal.html"> 弹出模态框(Modal) </a> </li>
    <li><a href="../components/navs.html"> 导航/滑动门(Nav) </a> </li>
    <li><a href="../components/navbar.html"> 导航栏(Navbar) </a> </li>
    <li><a href="../components/pagination.html"> 分页(Pagination) </a> </li>
    <li><a href="../components/popovers.html"> POP提示(Popover) </a> </li>
    <li><a href="../components/progress.html"> 进度条(Progress) </a> </li>
    <li><a href="../components/scrollspy.html"> 滚动监听(Scrollspy) </a> </li>
    <li><a href="../components/spinners.html"> 旋转特效(Spinners) </a> </li>
    <li><a href="../components/toasts.html"> 弹出提示框(Toasts) </a> </li>
    <li><a href="../components/tooltips.html"> 提示冒泡(Tooltip) </a> </li>
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../utilities/borders.html"> 公共样式 </a>
  <ul class="nav bd-sidenav">
    <li><a href="../utilities/borders.html"> 边框(border) </a> </li>
    <li><a href="../utilities/clearfix.html"> 清动浮动(clearfix) </a> </li>
    <li><a href="../utilities/close-icon.html"> 关闭图标(close icon) </a> </li>
    <li><a href="../utilities/colors.html"> 颜色(color) </a> </li>
    <li><a href="../utilities/display.html"> Display显示属性 </a> </li>
    <li><a href="../utilities/embed.html"> 嵌入(embed) </a> </li>
    <li><a href="../utilities/flex.html"> Flex弹性布局 </a> </li>
    <li><a href="../utilities/float.html"> Float浮动属性 </a> </li>
    <li><a href="../utilities/image-replacement.html"> 图像替换 </a> </li>
	<li><a href="../utilities/overflow.html"> 溢出 </a> </li>
    <li><a href="../utilities/position.html"> Position固顶(底)及定位 </a> </li>
    <li><a href="../utilities/screenreaders.html"> 读屏器 (Screenreaders)</a></li>
    <li><a href="../utilities/shadows.html"> 阴影(shadows)</a></li>
    <li><a href="../utilities/sizing.html"> 规格(sizi)</a></li>
    <li><a href="../utilities/spacing.html"> 间隔(spacing) </a> </li>
    <li><a href="../utilities/text.html"> 文本处理 </a> </li>
    <li><a href="../utilities/vertical-align.html"> 垂直对齐(vertical align) </a> </li>
    <li><a href="../utilities/visibility.html"> Visibility显示或隐藏(能见度)处理 </a> </li>
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../extend/icons.html"> 延伸(图标引用) </a>
  <ul class="nav bd-sidenav">
    <li><a href="../extend/icons.html"> 图标 </a> </li>
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../migration/index.html"> 迁移 </a>
  <ul class="nav bd-sidenav">
  </ul>
</div>
<div class="bd-toc-item"> <a class="bd-toc-link" href="../about/history.html"> 关于 </a>
  <ul class="nav bd-sidenav">
    <li><a href="../about/history.html"> History </a> </li>
    <li><a href="../about/team.html"> Team </a> </li>
    <li><a href="../about/brand.html"> Brand </a> </li>
    <li><a href="../about/license.html"> License </a> </li>
    <li><a href="../about/translations.html"> Translations </a> </li>
  </ul>
</div>
</nav>
</div>


<div class="d-none d-xl-block col-xl-2 bd-toc">
  <ul class="section-nav">
    <li class="toc-entry toc-h2"><a href="#global-settings">全局设置</a></li>
    <li class="toc-entry toc-h2"><a href="#headings">标题</a>
      <ul>
        <li class="toc-entry toc-h3"><a href="#customizing-headings">定义标题备注</a></li>
      </ul>
    </li>
    <li class="toc-entry toc-h2"><a href="#display-headings">显式标题</a></li>
    <li class="toc-entry toc-h2"><a href="#lead">Lead中心内容</a></li>
    <li class="toc-entry toc-h2"><a href="#inline-text-elements">文本内联元素</a></li>
    <li class="toc-entry toc-h2"><a href="#text-utilities">文本实用程序</a></li>
    <li class="toc-entry toc-h2"><a href="#abbreviations">Abbr缩略语</a></li>
    <li class="toc-entry toc-h2"><a href="#blockquotes">Blockquote 来源引用与备注</a>
      <ul>
        <li class="toc-entry toc-h3"><a href="#naming-a-source">底部备注来源</a></li>
        <li class="toc-entry toc-h3"><a href="#alignment">对齐处理</a></li>
      </ul>
    </li>
    <li class="toc-entry toc-h2"><a href="#lists">列表</a>
      <ul>
        <li class="toc-entry toc-h3"><a href="#unstyled">列表样式初始化</a></li>
        <li class="toc-entry toc-h3"><a href="#inline">分行或单行多列并排</a></li>
        <li class="toc-entry toc-h3"><a href="#description-list-alignment">dl表格式水平描述</a></li>
      </ul>
    </li>
    <li class="toc-entry toc-h2"><a href="#responsive-font-sizes">响应式字体大小</a></li>
  </ul>
</div>
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
  <h1 class="bd-title" id="content">排版</h1>
  <p class="bd-lead">Bootstrap排版的文档和示例，包括全局设置、标题、正文列表等。</p>
   
  <h2 id="global-settings">全局设置</h2>
  <p>Bootstrap定义了基本的全局显示、排版、以及链接样式，同时提供了一个 <a href="https://code.z01.com/docs/4.0/utilities/text/">通用文本样式示例</a>。</p>
  <ul>
    <li>使用 <a href="https://code.z01.com/docs/4.0/content/reboot/#native-font-stack">本地字体堆栈</a>，从而为每一个操作系统或设备上的 <code class="highlighter-rouge">font-family</code>渲染都得到最佳的体现（而不是强制多设备共享一套字体呈现标准）。</li>
    <li>对于更具包容性和可访问的类型规模，我们假设浏览器默认根<code class="highlighter-rouge">font-size</code>（通常为16像素），而访客根据自身需要定义浏览器字体大小呈现，并不会影响网页表现。</li>
    <li>Use the <code class="highlighter-rouge">$font-family-base</code>, <code class="highlighter-rouge">$font-size-base</code>, and <code class="highlighter-rouge">$line-height-base</code> attributes as our typographic base applied to the <code class="highlighter-rouge">&lt;body&gt;</code>.</li>
    <li>使用code class="highlighter-rouge">$link-color</code> 参数定义全局的a链接颜色和 <code class="highlighter-rouge">:hover</code>下划线颜色呈现。</li>
    <li>使用 <code class="highlighter-rouge">$body-bg</code> 参数定义 <code class="highlighter-rouge">&lt;body&gt;</code>的 <code class="highlighter-rouge">background-color</code> 性性，默认认为白色 (<code class="highlighter-rouge">#fff</code> )。</li>
  </ul>
  <p>这些定义可以在<code class="highlighter-rouge">_reboot.scss</code>找到，并根据需要自定义全局变量<code class="highlighter-rouge">_variables.scss</code>（确保 <code class="highlighter-rouge">$font-size-base</code> 使用 <code class="highlighter-rouge">rem</code>单位。</p>
  <h2 id="headings">标题</h2>
  <p>兼容所有HTML标题集，涵括从 <code class="highlighter-rouge">&lt;h1&gt;</code> 到 <code class="highlighter-rouge">&lt;h6&gt;</code>,的六种标题展现。</p>
  <table>
    <thead>
      <tr>
        <th>标签</th>
        <th>效果</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><p><code class="highlighter-rouge">&lt;h1&gt;&lt;/h1&gt;</code></p></td>
        <td><span class="h1">h1. Bootstrap heading</span></td>
      </tr>
      <tr>
        <td><p><code class="highlighter-rouge">&lt;h2&gt;&lt;/h2&gt;</code></p></td>
        <td><span class="h2">h2. Bootstrap heading</span></td>
      </tr>
      <tr>
        <td><p><code class="highlighter-rouge">&lt;h3&gt;&lt;/h3&gt;</code></p></td>
        <td><span class="h3">h3. Bootstrap heading</span></td>
      </tr>
      <tr>
        <td><p><code class="highlighter-rouge">&lt;h4&gt;&lt;/h4&gt;</code></p></td>
        <td><span class="h4">h4. Bootstrap heading</span></td>
      </tr>
      <tr>
        <td><p><code class="highlighter-rouge">&lt;h5&gt;&lt;/h5&gt;</code></p></td>
        <td><span class="h5">h5. Bootstrap heading</span></td>
      </tr>
      <tr>
        <td><p><code class="highlighter-rouge">&lt;h6&gt;&lt;/h6&gt;</code></p></td>
        <td><span class="h6">h6. Bootstrap heading</span></td>
      </tr>
    </tbody>
  </table>
  <figure class="highlight">
    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;h1&gt;</span>h1. Bootstrap heading<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;h2&gt;</span>h2. Bootstrap heading<span class="nt">&lt;/h2&gt;</span>
<span class="nt">&lt;h3&gt;</span>h3. Bootstrap heading<span class="nt">&lt;/h3&gt;</span>
<span class="nt">&lt;h4&gt;</span>h4. Bootstrap heading<span class="nt">&lt;/h4&gt;</span>
<span class="nt">&lt;h5&gt;</span>h5. Bootstrap heading<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;h6&gt;</span>h6. Bootstrap heading<span class="nt">&lt;/h6&gt;</span></code></pre>
  </figure>
  <p>CSS选择器也支持以<code class="highlighter-rouge">.h1</code> -- <code class="highlighter-rouge">.h6</code> 方式引用，这样可以使字体样式呈现出标题效果，不同是引用<code class="highlighter-rouge">.h1</code> -- <code class="highlighter-rouge">.h6</code>的文本段不会视作HTML的标题元素（往往SEO、读屏器和机器识别时对此很敏感-译者注），效果如下：</p>
  <div class="bd-example">
    <p class="h1">h1. Bootstrap heading</p>
    <p class="h2">h2. Bootstrap heading</p>
    <p class="h3">h3. Bootstrap heading</p>
    <p class="h4">h4. Bootstrap heading</p>
    <p class="h5">h5. Bootstrap heading</p>
    <p class="h6">h6. Bootstrap heading</p>
  </div>
  <div class="highlight">
    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"h1"</span><span class="nt">&gt;</span>h1. Bootstrap heading<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"h2"</span><span class="nt">&gt;</span>h2. Bootstrap heading<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"h3"</span><span class="nt">&gt;</span>h3. Bootstrap heading<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"h4"</span><span class="nt">&gt;</span>h4. Bootstrap heading<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"h5"</span><span class="nt">&gt;</span>h5. Bootstrap heading<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"h6"</span><span class="nt">&gt;</span>h6. Bootstrap heading<span class="nt">&lt;/p&gt;</span></code></pre>
  </div>
  <h3 id="customizing-headings">自定义标题备注</h3>
  <p>使用附带的实用类从Bootstrap 重新创建小的辅助标题文本，如下所示：</p>
  <div class="bd-example"> <span class="h3"> Fancy display heading <small class="text-muted">With faded secondary text</small> </span> </div>
  <figure class="highlight">
    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;h3&gt;</span>
  Fancy display heading
  <span class="nt">&lt;small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>With faded secondary text<span class="nt">&lt;/small&gt;</span>
<span class="nt">&lt;/h3&gt;</span></code></pre>
  </figure>
  <h2 id="display-headings">显式标题</h2>
  <p>bootstrap可以传统的标题元素设计得更漂亮，以迎合你的网页内容。如果你想要一个标题醒目，考虑使用显示标题——一种更大型、鲜明的标题样式，则可以用下面方法：</p>
  <div class="bd-example bd-example-type">
    <table class="table">
      <tbody>
        <tr>
          <td><span class="display-1">Display 1</span></td>
        </tr>
        <tr>
          <td><span class="display-2">Display 2</span></td>
        </tr>
        <tr>
          <td><span class="display-3">Display 3</span></td>
        </tr>
        <tr>
          <td><span class="display-4">Display 4</span></td>
        </tr>
      </tbody>
    </table>
  </div>
  <figure class="highlight">
    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"display-1"</span><span class="nt">&gt;</span>Display 1<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"display-2"</span><span class="nt">&gt;</span>Display 2<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"display-3"</span><span class="nt">&gt;</span>Display 3<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"display-4"</span><span class="nt">&gt;</span>Display 4<span class="nt">&lt;/h1&gt;</span></code></pre>
  </figure>
  <h2 id="lead">Lead中心内容</h2>
  <p>通过应用 <code class="highlighter-rouge">.lead</code>样式，可以定义一个中心段落，用于提示这是中心内容或重要内容。</p>
  <div class="bd-example">
    <p class="lead"> Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. </p>
  </div>
  <div class="highlight">
    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"lead"</span><span class="nt">&gt;</span>
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<span class="nt">&lt;/p&gt;</span></code></pre>
  </div>
  <h2 id="inline-text-elements">文本内联元素</h2>
  <p>HTML5 文本元素的常用内联表现方法也适用于BootStrap4。</p>
  <div class="bd-example">
    <p>You can use the mark tag to
      <mark>highlight</mark>
      text.</p>
    <p><del>This line of text is meant to be treated as deleted text.</del></p>
    <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
    <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
    <p><u>This line of text will render as underlined</u></p>
    <p><small>This line of text is meant to be treated as fine print.</small></p>
    <p><strong>This line rendered as bold text.</strong></p>
    <p><em>This line rendered as italicized text.</em></p>
  </div>
  <div class="highlight">
    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;</span>You can use the mark tag to <span class="nt">&lt;mark&gt;</span>highlight<span class="nt">&lt;/mark&gt;</span> text.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;&lt;del&gt;</span>This line of text is meant to be treated as deleted text.<span class="nt">&lt;/del&gt;&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;&lt;s&gt;</span>This line of text is meant to be treated as no longer accurate.<span class="nt">&lt;/s&gt;&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;&lt;ins&gt;</span>This line of text is meant to be treated as an addition to the document.<span class="nt">&lt;/ins&gt;&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;&lt;u&gt;</span>This line of text will render as underlined<span class="nt">&lt;/u&gt;&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;&lt;small&gt;</span>This line of text is meant to be treated as fine print.<span class="nt">&lt;/small&gt;&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;&lt;strong&gt;</span>This line rendered as bold text.<span class="nt">&lt;/strong&gt;&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;&lt;em&gt;</span>This line rendered as italicized text.<span class="nt">&lt;/em&gt;&lt;/p&gt;</span></code></pre>
  </div>
  <p> <code class="highlighter-rouge">.mark</code>、<code class="highlighter-rouge">.small</code>类也可以应用相同的HTML标签<code class="highlighter-rouge">&lt;mark&gt;</code>、<code class="highlighter-rouge">&lt;mall&gt;</code>，这样还可以避免标签带来的任何不必要的语义含义。<br/>
虽然上面没有明确显示，但我们可以随意使用<code class="highlighter-rouge">&lt;b&gt;</code>>和<code class="highlighter-rouge">&lt;i&gt;</code>等HTML5标签，其中<code class="highlighter-rouge">&lt;b&gt;</code>旨在突出显示单词或短语、而不会增加重要性，<code class="highlighter-rouge">&lt;i&gt;</code>主要用于语音、技术术语等。</p>
  <h2 id="text-utilities">文本实用程序</h2>
  <p>使用Bootstrap提供的 <a href="../utilities/text.html#text-alignment">文本实用程序</a>可更改文本对齐，变换，样式，权重和颜色。</p>
  <h2 id="abbreviations">Abbr缩略语</h2>
  <p>Stylized implementation of HTML’s <code class="highlighter-rouge">&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.</p>
  <p>Add <code class="highlighter-rouge">.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
  <div class="bd-example">
    <p><abbr title="attribute">attr</abbr></p>
    <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
  </div>
  <div class="highlight">
    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;&lt;abbr</span> <span class="na">title=</span><span class="s">"attribute"</span><span class="nt">&gt;</span>attr<span class="nt">&lt;/abbr&gt;&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;&lt;abbr</span> <span class="na">title=</span><span class="s">"HyperText Markup Language"</span> <span class="na">class=</span><span class="s">"initialism"</span><span class="nt">&gt;</span>HTML<span class="nt">&lt;/abbr&gt;&lt;/p&gt;</span></code></pre>
  </div>
  <h2 id="blockquotes">Blockquote 来源备注与引用</h2>
  <p>引用文档中另一个来源的内容块，，请在一段HTML外面包裹 <code class="highlighter-rouge">&lt;blockquote class="blockquote"&gt;</code>，作为引用。为了显示直接引用，我们推荐使用<code class="highlighter-rouge">p</code>作为子级包裹容器，这在 <abbr title="HyperText Markup Language">HTML</abbr> 规范中也有多个变通方法，下面逐一讲解。</p>
  <div class="bd-example">
    <blockquote class="blockquote">
      <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    </blockquote>
  </div>
  <div class="highlight">
    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;blockquote</span> <span class="na">class=</span><span class="s">"blockquote"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/blockquote&gt;</span></code></pre>
  </div>
  <h3 id="naming-a-source">底部备注来源</h3>
  <p><code class="highlighter-rouge">&lt;footer class="blockquote-footer"&gt;</code> 用于标识来源，一般用于页脚（所以有<code class="highlighter-rouge">*-footer</code>)，然后配合 <code class="highlighter-rouge">&lt;cite&gt;</code>使用。</p>
  <div class="bd-example">
    <blockquote class="blockquote">
      <p class="mb-0">爱上一个地方，就应该背上包去旅行，走得更远。</p>
      <footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer>
    </blockquote>
  </div>
  <div class="highlight">
    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;blockquote</span> <span class="na">class=</span><span class="s">"blockquote"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span>爱上一个地方，就应该背上包去旅游，走得更远。<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;footer</span> <span class="na">class=</span><span class="s">"blockquote-footer"</span><span class="nt">&gt;</span>出自商务印书馆的 <span class="nt">&lt;cite</span> <span class="na">title=</span><span class="s">"Source Title"</span><span class="nt">&gt;</span>《新华字典》<span class="nt">&lt;/cite&gt;&lt;/footer&gt;</span>
<span class="nt">&lt;/blockquote&gt;</span></code></pre>
  </div>
  <h3 id="alignment">对齐处理</h3>
  <p>如果需要居中对齐或右对齐，使用<code class="highlighter-rouge">.text-center</code>、<code class="highlighter-rouge">.text-right</code>方法配合即可，如下两示例：</p>
  <div class="bd-example">
    <blockquote class="blockquote text-center">
      <p class="mb-0">爱上一个地方，就应该背上包去旅行，走得更远。</p>
      <footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer>
    </blockquote>
  </div>
  <div class="highlight">
    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;blockquote</span> <span class="na">class=</span><span class="s">"blockquote text-center"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span>爱上一个地方，就应该背上包去旅行，走得更远。<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;footer</span> <span class="na">class=</span><span class="s">"blockquote-footer"</span><span class="nt">&gt;</span>出自商务印书馆的 <span class="nt">&lt;cite</span> <span class="na">title=</span><span class="s">"Source Title"</span><span class="nt">&gt;</span>《新华字典》<span class="nt">&lt;/cite&gt;&lt;/footer&gt;</span>
<span class="nt">&lt;/blockquote&gt;</span></code></pre>
  </div>
  <div class="bd-example">
    <blockquote class="blockquote text-right">
      <p class="mb-0">爱上一个地方，就应该背上包去旅行，走得更远。</p>
      <footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer>
    </blockquote>
  </div>
  <div class="highlight">
    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;blockquote</span> <span class="na">class=</span><span class="s">"blockquote text-right"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span>爱上一个地方，就应该背上包去旅行，走得更远。<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;footer</span> <span class="na">class=</span><span class="s">"blockquote-footer"</span><span class="nt">&gt;</span>出自商务印书馆的 <span class="nt">&lt;cite</span> <span class="na">title=</span><span class="s">"Source Title"</span><span class="nt">&gt;</span>《新华字典》<span class="nt">&lt;/cite&gt;&lt;/footer&gt;</span>
<span class="nt">&lt;/blockquote&gt;</span></code></pre>
  </div>
  <h2 id="lists">列表</h2>
  <h3 id="unstyled">列表样式初始化</h3>
  <p>在ul(或ol）上使用<code class="highlighter-rouge">.list-unstyled</code>可以删除列表项目上默认的list-style以及左外边距（只针对直接子元素），这只生效于在直接子列表项目上，不影响你嵌套的子列表。</p>
  <div class="bd-example">
    <ul class="list-unstyled">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Consectetur adipiscing elit</li>
      <li>Integer molestie lorem at massa</li>
      <li>Facilisis in pretium nisl aliquet</li>
      <li>Nulla volutpat aliquam velit
        <ul>
          <li>Phasellus iaculis neque</li>
          <li>Purus sodales ultricies</li>
          <li>Vestibulum laoreet porttitor sem</li>
          <li>Ac tristique libero volutpat at</li>
        </ul>
      </li>
      <li>Faucibus porta lacus fringilla vel</li>
      <li>Aenean sit amet erat nunc</li>
      <li>Eget porttitor lorem</li>
    </ul>
  </div>
  <div class="highlight">
    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list-unstyled"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li&gt;</span>Lorem ipsum dolor sit amet<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Consectetur adipiscing elit<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Integer molestie lorem at massa<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Facilisis in pretium nisl aliquet<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Nulla volutpat aliquam velit
    <span class="nt">&lt;ul&gt;</span>
      <span class="nt">&lt;li&gt;</span>Phasellus iaculis neque<span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;li&gt;</span>Purus sodales ultricies<span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;li&gt;</span>Vestibulum laoreet porttitor sem<span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;li&gt;</span>Ac tristique libero volutpat at<span class="nt">&lt;/li&gt;</span>
    <span class="nt">&lt;/ul&gt;</span>
  <span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Faucibus porta lacus fringilla vel<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Aenean sit amet erat nunc<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>Eget porttitor lorem<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre>
  </div>
  <h3 id="inline">分行或单行多列并排</h3>
  <p> 使用<code class="highlighter-rouge">.list-inline</code> 、 <code class="highlighter-rouge">.list-inline-item</code>结合，可以实现列表逐行显示（默认不引用且无父元素影响也是逐行显示）、或单行并多列并排（遵循从左对右的原则、并清除<code class="highlighter-rouge">margin</code>方法）。</p>
  <div class="bd-example">
    <ul class="list-inline">
      <li class="list-inline">列表之一</li>
      <li class="list-inline">列表之二</li>
      <li class="list-inline">列表之三</li>
    </ul>
  </div>
  <div class="highlight">
    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list-inline"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-inline"</span><span class="nt">&gt;</span>列表之一<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-inline"</span><span class="nt">&gt;</span>列表之二<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-inline"</span><span class="nt">&gt;</span>列表之三<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre>
  </div>
  <div class="bd-example">
    <ul class="list-inline">
      <li class="list-inline-item">列表之一</li>
      <li class="list-inline-item">列表之二</li>
      <li class="list-inline-item">列表之三</li>
    </ul>
  </div>
  <div class="highlight">
    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list-inline"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-inline-item"</span><span class="nt">&gt;</span>列表之一<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-inline-item"</span><span class="nt">&gt;</span>列表之二<span class="nt">&lt;/li&gt;</span>
  <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-inline-item"</span><span class="nt">&gt;</span>列表之三<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre>
  </div>
  <h3 id="description-list-alignment">dl表格式水平描述</h3>
  <p>使用BootStrap栅格系统的预定义类（或者说语义化mixins），可以水平对齐条目和描述。对于较长的条目，你可以视情况添加一个<code class="highlighter-rouge">.text-truncate</code>类，从而用省略号截断文本。</p>
  <div class="bd-example">
    <dl class="row">
      <dt class="col-sm-3">描述列表</dt>
      <dd class="col-sm-9">一个关于描述列表的两端对齐</dd>
      <dt class="col-sm-3">Euismod</dt>
      <dd class="col-sm-9">
        <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
        <p>Donec id elit non mi porta gravida at eget metus.</p>
      </dd>
      <dt class="col-sm-3">Malesuada porta</dt>
      <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
      <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
      <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
      <dt class="col-sm-3">Nesting</dt>
      <dd class="col-sm-9">
        <dl class="row">
          <dt class="col-sm-4">Nested definition list</dt>
          <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
        </dl>
      </dd>
    </dl>
  </div>
  <div class="highlight">
    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;dl</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;dt</span> <span class="na">class=</span><span class="s">"col-sm-3"</span><span class="nt">&gt;</span>描述列表<span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">&gt;</span>一个关于描述列表的两端对齐<span class="nt">&lt;/dd&gt;</span>

  <span class="nt">&lt;dt</span> <span class="na">class=</span><span class="s">"col-sm-3"</span><span class="nt">&gt;</span>Euismod<span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;p&gt;</span>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;p&gt;</span>Donec id elit non mi porta gravida at eget metus.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/dd&gt;</span>

  <span class="nt">&lt;dt</span> <span class="na">class=</span><span class="s">"col-sm-3"</span><span class="nt">&gt;</span>Malesuada porta<span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">&gt;</span>Etiam porta sem malesuada magna mollis euismod.<span class="nt">&lt;/dd&gt;</span>

  <span class="nt">&lt;dt</span> <span class="na">class=</span><span class="s">"col-sm-3 text-truncate"</span><span class="nt">&gt;</span>Truncated term is truncated<span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">&gt;</span>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.<span class="nt">&lt;/dd&gt;</span>

  <span class="nt">&lt;dt</span> <span class="na">class=</span><span class="s">"col-sm-3"</span><span class="nt">&gt;</span>Nesting<span class="nt">&lt;/dt&gt;</span>
  <span class="nt">&lt;dd</span> <span class="na">class=</span><span class="s">"col-sm-9"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;dl</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;dt</span> <span class="na">class=</span><span class="s">"col-sm-4"</span><span class="nt">&gt;</span>Nested definition list<span class="nt">&lt;/dt&gt;</span>
      <span class="nt">&lt;dd</span> <span class="na">class=</span><span class="s">"col-sm-8"</span><span class="nt">&gt;</span>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.<span class="nt">&lt;/dd&gt;</span>
    <span class="nt">&lt;/dl&gt;</span>
  <span class="nt">&lt;/dd&gt;</span>
<span class="nt">&lt;/dl&gt;</span></code></pre>
  </div>
  <h2 id="responsive-font-sizes"><span class="bd-content-title">响应式字体大小</span></h2>
  <p>Bootstrap v4.5附带启用响应字体大小的选项，允许文本在设备和视口大小之间更自然地缩放。 可以通过将 <code class="highlighter-rouge">$enable-responsive-font-sizes</code> Sass 变量更改为<code class="highlighter-rouge">true</code>并重新编译Bootstrap来启用<abbr title="Responsive font sizes">RFS</abbr>.</p>
  
  <p>为了支持<abbr title="Responsive font sizes">RFS</abbr>,我们使用Sass mixin来替换我们正常的字体大小属性。 响应式字体大小将编译为<code class="highlighter-rouge">font-size</code>属性. 响应式字体大小将编译为 <code class="highlighter-rouge">calc()</code>函数，混合使用<code class="highlighter-rouge">rem</code>和视口单元以启用响应式缩放行为。 有关<abbr title="Responsive font sizes">RFS</abbr>及其配置的更多信息，请访问其<a href="https://github.com/twbs/rfs">GitHub 存储库</a>.</p>
</main>
</div>
</div>



<script src="../js/jquery-3.2.1.slim.min.js"></script> 
<script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery-slim.min.js"><\/script>')</script> 
<script src="../dist/js/popper.min.js"></script> 
<script src="../dist/js/bootstrap.min.js"></script> 
<script src="../assets/js/docs.min.js"></script> 
<script src="../assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../assets/js/docsearch.min.js"></script> 
 

</body>
</html>
